@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800);
//@import url(https://fonts.googleapis.com/css?family=Dosis:300,500,600,700);


// Vars for Bootstrap (including BS SASS a bit complicated)
$screen-xs: 480px;
$screen-sm: 768px;
$screen-md: 992px;
$screen-lg: 1200px;

html {
    height: 100%;
    overflow-y: hidden;
}

body {
    height: 100%;
    min-height: 100vh; // works better than %
    background-color: #000;
    background-size: cover;
    background-position: center top;
    background-attachment: fixed; // plus Workarounds for mobile browsers (https://wp.me/p26B9c-dc)
    overflow-y: auto;
    color: #ddd;
    font-family: 'Open Sans', sans-serif;
    -webkit-font-smoothing: antialiased; // Safari (Thin) Font Legibility

    ::-moz-selection {
        background: #4dae97;
    }
    ::selection {
        background: #4dae97;
    }

    a {
        color: #fff;

        &:hover,
        &:focus {
            color: #fff;
        }
    }

    .text-shadow {
        text-shadow: 1px 2px 1px rgba(#000, 0.5);
    }

    .bg-darker {
        min-height: 100vh;
        position: relative; // for footer positioning
        background: rgba(#000, 0.4);
        padding-bottom: 122px;
    }

    h1 {
        margin: 10vh 0 7vh;
        font-size: 6vw;
        font-weight: 800;
        letter-spacing: 3vw;
        text-transform: uppercase;
        @extend .text-shadow;

        @media (min-width: $screen-sm) {
            font-size: 44px;
            letter-spacing: 20px;
        }
    }

    .weather-info {
        font-size: 24px;

        p {
            margin-bottom: 30px;
        }

        h2.city {
            margin: 0 0 7vh;
            font-size: 26px;
            text-transform: uppercase;
            letter-spacing: 8px;
            -webkit-hyphens: auto;
            -moz-hyphens: auto;
            -ms-hyphens: auto;
            hyphens: auto;
            @extend .text-shadow;

            @media (min-width: $screen-sm) {
                font-size: 30px;
            }

            .glyphicon {
                font-size: 0.9em;
                position: relative;
                left: -5px;
                -webkit-transform: rotate(40deg);
                transform: rotate(40deg);
            }
        }

        .data-label {
            display: block;
            margin-bottom: 4px;
            font-size: 0.7em;
            opacity: 0.9;

            small {
                display: none;

                @media (min-width: $screen-xs) {
                    display: inline;
                }
            }
        }

        .data-value {
            @extend .text-shadow;
        }
    }

    #geo-error-modal {
        .modal-content {
            background: #d9534f;
            color: #fff;

            button {
                color: #fff;
                opacity: 1;
            }
        }
    }

    #refresh-button {
        position: absolute;
        top: 10px;
        right: 10px;
        color: #ddd;
        background-color: rgba(#fff, 0.25);
        border: none;

        .no-touchevents & {
            display: none;
        }
    }

    .footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 12px 0;
        background: rgba(#fff, 0.1);
        text-align: center;
        font-size: 0.9em;

        p:last-of-type {
            margin-bottom: 0;
        }

        .footer-inline {
            display: none;

            @media (min-width: $screen-xs) {
                display: inline;
            }
        }

        .footer-block {
            display: block;
            margin-bottom: 10px;

            @media (min-width: $screen-xs) {
                display: none;
            }
        }
    }

    #impressum-modal {
        color: #555;

        a {
            color: inherit;
        }
    }
 }
